<template>
    <div class="label-detail">
        <el-descriptions :column="1" border size="default" v-loading="loading">
            <el-descriptions-item
                v-for="(item, index) in baseConfig"
                :key="index + 'baseConfig'" 
                :label="item.name"
                label-class-name="base-content-label"
                class-name="base-content-content">
                {{ basicInfo[item.field] || '-' }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps } from 'vue'
import { detailTagById } from '../../../api/tag.ts'
const props = defineProps({
    id: {
        type: [String, Number],
        default: ''
    }
})


let baseConfig = ref([
    { name: '标签名称', field: 'tag_name' },
    { name: '创建人', field: 'nickname' },
    { name: '创建时间', field: 'create_time' }
])

let basicInfo = ref({
    id: 1,
    labelName: '电影迷',
    username: '小程序用户1ds',
    userId: 2,
    createTime: '2024-01-04 12:11:56'
})

watch(() => props.id, async (val: [Number, String]) => {
    if (val) {
        // 调获取详情接口
        const result = await detailTagById({
            tag_id:val
        })
       basicInfo.value = result.data
        
    }
}, {
    immediate: true,
    deep: true
})


</script>

<style lang="less" scoped>
// less中使用 ::v-deep 深度选择器更改element-ui组件的样式
// scss中vue3使用:deep(.class)  vue2使用/deep/ .class
::v-deep .base-content-label {
    width: 100px;
    font-weight: normal !important;
    font-size: 12px !important;
    color: #63686F;
    background: #FAFAFA;
}
::v-deep .base-content-content {
    font-size: 12px !important;
    color: #63686F !important;
    min-width: 150px;
    word-break: break-all;
}
.label-detail {
    padding: 16px;
}
</style>